<template>
  <div id="updateSome">
    <div class="title">编辑数据</div>
    <div class="allData">
      <div class="rowHead">
        <div class="id">ID</div>
        <div class="userName">用户名</div>
        <div class="userMsg">用户信息</div>
        <div class="userConcat">联系方式</div>
        <div class="update">操作</div>
      </div>
      <div class="row" v-for="(item, index) in data" :key="index">
        <div class="id">{{ item.id }}</div>
        <div class="userName">{{ item.userName }}</div>
        <div class="userMsg">{{ item.userMsg }}</div>
        <div class="userConcat">{{ item.userConcat }}</div>
        <div class="update" @click="updateOne(item)">修改</div>
      </div>
    </div>
    <div class="form">
      <div class="sinBlock">
        <div class="label">ID</div>
        <div class="val">
          <input type="text" v-model="result.id" readonly />
        </div>
      </div>
      <div class="sinBlock">
        <div class="label">用户名</div>
        <div class="val"><input type="text" v-model="result.userName" /></div>
      </div>
      <div class="sinBlock">
        <div class="label">用户信息</div>
        <div class="val"><input type="text" v-model="result.userMsg" /></div>
      </div>
      <div class="sinBlock">
        <div class="label">联系方式</div>
        <div class="val"><input type="text" v-model="result.userConcat" /></div>
      </div>
      <div class="sinBlock">
        <div class="btn" @click="updateData">保存</div>
        <div class="btn" @click="cancel">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@js/api.js";
export default {
  name: "updateSome",
  data() {
    return {
      data: [],
      result: {
        id: "",
        userName: "",
        userMsg: "",
        userConcat: "",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      api.myGet("/api/queryAll", {}).then((res) => {
        this.data = res.data.data;
      });
    },
    updateOne(item) {
      this.result = item;
    },
    updateData() {
      api.myGet("/api/updateSome", this.result).then((res) => {
        console.log("编辑一条返回的数据", res);
      });
      this.cancel();
    },
    cancel() {
      this.result = {
        id: "",
        userName: "",
        userMsg: "",
        userConcat: "",
      };
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
#updateSome {
  user-select: none;
  .title {
    line-height: 50px;
    padding-left: 20px;
  }
  .allData {
    background: #eee;
    .rowHead {
      overflow: hidden;
      line-height: 50px;
      text-align: center;
      div {
        float: left;
        width: 150px;
      }
    }
    .row {
      overflow: hidden;
      line-height: 50px;
      text-align: center;
      div {
        float: left;
        width: 150px;
      }
    }
  }
  .form {
    overflow: hidden;
    margin-top: 10px;
    .sinBlock {
      overflow: hidden;
      float: left;
      margin-right: 10px;
      margin-bottom: 10px;
      .label {
        float: left;
        width: 100px;
        text-align: right;
        margin-right: 10px;
        line-height: 34px;
      }
      .val {
        float: left;
        input {
          height: 30px;
          border: none;
          border: 1px solid #eee;
          width: 150px;
        }
      }
      .btn {
        float: left;
        width: 80px;
        height: 30px;
        text-align: center;
        background: #515167;
        line-height: 30px;
        color: #fff;
        margin-right: 10px;
        margin-top: 2px;
        border-radius: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>